<!doctype html>
<html class="no-js">

<head>
    <title>团购详情</title>
    <#include "/res/components/meta.html" />
    <#include "/res/components/stylesheets.html" />
    <link rel="stylesheet" type="text/css" href="/res/stylesheets/groupBuyingInfo.css">
</head>

<body>
    <div id="app">
        <div class="top-text" v-if="${status!0} == 1">
            <div>
                <span class="am-icon-check-circle-o"></span>&nbsp;团购进行中</div>
            <div>赶紧召唤小伙伴加入吧！</div>
        </div>
        <div class="product-container am-g">
            <div class="am-u-sm-3 product-cover">
                <img src="${(product.cover)!}">
            </div>
            <div class="am-u-sm-9">
                <div class="product-title">
                    <span>${(product.name)!}</span>
                </div>
                <div class="product-desc">
                    <span>${(group.num)!}人团：</span>
                    <span>￥${(group.price/100.0)!0}</span>
                </div>
                <div class="product-tips">
                    <a href="/tg/product/getProductById?id=${(product.id)!}" class="theme-color">查看详情&nbsp;》</a>
                </div>
            </div>
        </div>
        <div class="user-list-container">
            <ul class="am-avg-sm-5 am-thumbnails">
                <#list list as item>
                    <li class="user-list-item">
                        <a href="#"><img class="am-thumbnail am-circle" src="${(item.logo)!'/res/assets/img/default-avator.jpg'}" /></a>
                    </li>
                </#list>
            </ul>
            <#if (group.joinLeft != 0) >
                <div class="user-list-remaining">
                    还差
                    <span>${(group.joinLeft)!}</span>人，等你入座！
                </div>
            </#if>
        </div>
        <#if (group.joinLeft != 0) >
            <div class="line-container">
                <div class="line-container-line theme-background-color"></div>
                <!-- <div class="line-container-text">剩余 33:25:50 结束</div> -->
                <div class="line-container-text" id="getting-started"></div>
            </div>
        </#if>
        <div class="leader-container am-g">
            <div class="am-u-sm-2">
                <a href="#"><img class="am-thumbnail am-circle leader-avator" src="${list[0].logo}" /></a>
            </div>
            <div class="am-u-sm-10">
                <div>
                    <span>团长&nbsp;${list[0].name}&nbsp;发话</span>
                    <span class="leader-time">${(group.startTime?string('YYYY-MM-dd'))!}开团</span>
                </div>
                <div>“
                    <span class="leader-comment">${(group.leaderSay)!}</span>”</div>
            </div>
        </div>
        <div class="group-buying-detail-container">
            <div class="line-container">
                <div class="line-container-line theme-background-color"></div>
                <div class="line-container-text1">查看更多</div>
            </div>
            <div class="group-buying-detail-content">
                <#include '/res/components/productIntro.html'/>
            </div>
        </div>
        <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default bottom-container" id="">
            <div class="am-g">
                <div class="am-navbar-nav am-cf am-u-sm-3">
                    <a href="/tg/">
                        <span class="am-icon-home"></span>
                        <span class="am-navbar-label">首页</span>
                    </a>
                </div>
                <div class="am-navbar-nav am-cf am-u-sm-9 bottom-join-container">
                    <#if (group.joinLeft != 0) >
                        <#if isJoined>
                            <span class="am-navbar-label">我已参团</span>
                        <#else>
                            <a href="/tg/order/addOrder?groupId=${(group.id)!}">
                                <span class="am-navbar-label">我要参团</span>
                            </a>
                        </#if>
                    <#else>
                        <span class="am-navbar-label">开团成功</span>
                    </#if>
                </div>
            </div>
        </div>
    </div>
    <#include "/res/components/scripts.html" />
    <#include "/res/components/wxConfig.html" />
    <script src="https://cdn.bootcss.com/jquery.countdown/2.2.0/jquery.countdown.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
    wx.ready(function() {
        wx.hideAllNonBaseMenuItem();
        var title = '善小姐的美食'
        var desc = '我用${(group.price/100.0)!0}元买到了${product.name}'
        var link = '${host}/group/findGroupProduct/${shareCode!}'
        var imgUrl = '${product.cover!""}'
        initWXShareAll(title, desc, link, imgUrl)
    })
    $("#getting-started")
        .countdown("${(group.startTime?string('YYYY-MM-dd'))!}", function(event) {
            $(this).text(
                event.strftime('%D 天 %H:%M:%S')
            );
        });
    </script>
</body>

</html>